<template>
  <div class="container">
    <div class="header">
      <el-input
        v-model="form.orgName"
        placeholder="请输入组织机构/单位"
        class="el_input"
        size="small"
        maxlength="10"
        clearable
        @clear="searchClick"
      ></el-input>
      <el-button
        type="primary"
        size="mini"
        style="border-radius: 5px; color: #d4d4d4; margin-left: 8px"
        @click="searchClick"
        >查 询</el-button
      >
    </div>
    <div class="tree-box">
      <Tree ref="refTree" @toggleOrgId="toggleOrgId"></Tree>
    </div>
  </div>
</template>

<script>
import Tree from "@components/tree/Tree.vue"; //组织机构
import { mapState } from "vuex";
export default {
  components: { Tree },
  props: [],
  mixins: [],
  data() {
    return {
      form: {
        orgName: "",
      },
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {},
  methods: {
    // 查询组织机构
    async searchClick() {
      this.loadingSearch = true;
      this.$refs.refTree.handleParam(this.form);
      this.loadingSearch = false;
    },

    // 切换组织机构
    toggleOrgId(data) {
      this.$emit("toggleOrg", data);
    },
  },
};
</script>


<style scoped lang="less">
.container {
  width: 100%;
  height: calc(100% - 90px);

  .header {
    display: flex;
    margin-bottom: 22px;
    .el_input {
      width: 80%;
      border-radius: 5px !important;

      ::v-deep .el-input__inner {
        background: #001f5b !important;
        border: none !important;
        border-radius: 5px !important;
      }
    }
  }

  .tree-box {
    height: calc(100% - 70px);
    // background: rgb(156, 253, 184);
  }
}
</style>
